<template>
  <div class="ordert_evaluate">
    <van-sticky>
      <van-nav-bar title="订单详情" left-arrow @click-left="back" />
    </van-sticky>
    <div class="content">
      <div class="head flex">
        <div class="pic"></div>
        <h4></h4>
      </div>
      <ul class="star">
        <li>
          <label for="">服务态度</label>
          <van-rate v-model="form.attitude" />
        </li>
        <li>
          <label for="">服务质量</label>
          <van-rate v-model="form.quality" />
        </li>
        <li>
          <label for="">办理速度</label>
          <van-rate v-model="form.speed" />
        </li>
      </ul>
    </div>
    <div class="h_18"></div>
    <div class="content">
      <van-field v-model="form.evaContent" rows="1" autosize type="textarea" placeholder="您对此次服务满意吗？您的评价会帮助我们进行更好的服务哦" />
    </div>
    <div class="btn" @click="submit">发表评价</div>
  </div>
</template>

<script>
import api from 'api/api'
export default {
  data () {
    return {
      value: '',
      message: '',
      form: {
        orderId: this.$route.params.id,
        attitude: 0,
        quality: 0,
        speed: 0,
        evaContent: ''
      },
      detail: '',
    }
  },
  methods: {
    getData () {
      api.orderDetail({
        data: {
          id: this.$route.params.id,
          orderNo: '1251341907079073792'
        }
      }).then(res => {
        this.detail = res.data
      })
    },
    submit () {
		for(var i in this.form){
			console.log(this.form[i])
			if(!this.form[i]){
				this.$toast('评价不能为空')
				console.log(i)
				return
			}
		}
      api.orderEvaluation({
        data: this.form
      }).then(res => {
		  if(res.code==200){
			  this.$toast('评价成功')
			  this.back()
		  }
    
      })
    },
    back () {
      window.history.go(-1)
    }
  }
}
</script>

<style lang="scss">
.ordert_evaluate {
  .content {
    padding: 0.3rem;
    text-align: left;
    .star {
      font-size: 0.3rem;
      li {
        display: flex;
        align-items: center;
        margin-top: 0.28rem;
        label {
          margin-right: 0.3rem;
        }
      }
    }

    .van-cell {
      border: 1px solid #999999;
      border-radius: 0.13rem;
    }
  }
  .h_18 {
    height: 0.18rem;
    background-color: #f5f5f5;
  }
  .btn {
    width: 6.9rem;
    line-height: 0.76rem;
    background: linear-gradient(
      96deg,
      rgba(72, 143, 240, 1),
      rgba(51, 130, 239, 1)
    );
    border-radius: 0.38rem;
    margin-left: 0.3rem;
    text-align: center;
    color: #fff;
    margin-top: 0.76rem;
    font-size: 0.36rem;
  }
}
</style>